Setting up serverFetcher for server-side data fetching

Let's replace our mock data with real pet data using serverFetcher and the Dog API.

Modify the Home component in src/js/pages/Home/Home.js:

import React from 'react';
+ import { useCurrentRouteData } from '@tata1mg/router';

const Home = () => {
-   // Mock data - we'll replace this with real API data later
-   const pets = [
-     { id: 1, name: 'Max', species: 'Dog', breed: 'Labrador', age: 3, image: 'https://place-puppy.com/300x300' },
-     { id: 2, name: 'Whiskers', species: 'Cat', breed: 'Siamese', age: 2, image: 'https://placekitten.com/300/300' },
-     { id: 3, name: 'Hopper', species: 'Rabbit', breed: 'Dutch', age: 1, image: 'https://placebear.com/300/300' }
-   ];
+   const { data, error, isFetching } = useCurrentRouteData();
+   
+   if (isFetching) return <div>Loading pets...</div>;
+   if (error) return <div>Error loading pets: {error.message}</div>;
+   
+   const dogs = data?.message || [];
+   const breeds = Object.keys(dogs);

  return (
    <div>
-     <h1>Available Pets</h1>
+     <h1>Available Dog Breeds</h1>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px' }}>
-       {pets.map(pet => (
-         <div key={pet.id} style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '5px' }}>
-           <img src={pet.image} alt={pet.name} style={{ width: '200px', height: '200px', objectFit: 'cover' }} />
-           <h2>{pet.name}</h2>
-           <p>{pet.species} • {pet.breed}</p>
-           <p>Age: {pet.age} {pet.age === 1 ? 'year' : 'years'}</p>
+       {breeds.slice(0, 12).map(breed => (
+         <div key={breed} style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '5px', width: '250px' }}>
+           <h2 style={{ textTransform: 'capitalize' }}>{breed}</h2>
+           <p>Click to see available dogs</p>
          </div>
        ))}
      </div>
    </div>
  );
};

+ // Add the serverFetcher function to fetch data on the server
+ Home.serverFetcher = async () => {
+   try {
+     // Fetch from the Dog API to get list of breeds
+     const response = await fetch('https://dog.ceo/api/breeds/list/all');
+     const data = await response.json();
+     return data;
+   } catch (error) {
+     console.error('Error fetching dog breeds:', error);
+     throw error;
+   }
+ };

export default Home;

Refresh your browser, and you should now see a list of dog breeds loaded from the Dog API.